<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>zrender - 001</title>
    <link rel="stylesheet" href="../lib/main.css">
</head>

<body>
    <div id="main"></div>
    <script src="../lib/zrender.js"></script>
    <script>
        window.onload = function () {
            var container = document.querySelector('#main');
            var zr = zrender.init(container);

            var w = zr.getWidth();
            var h = zr.getHeight();

            var r = 30;
            var circle = new zrender.Circle({
                shape: {
                    cx: r,
                    cy: h / 2,
                    r: r
                },
                style: {
                    fill: 'transparent',
                    stroke: '#FF6EBE'
                },
                silent: true
            });

            circle.animate('shape', true)
                .when(5000, {
                    cx: w - r
                })
                .when(10000, {
                    cx: r
                })
                .start();

            zr.add(circle);
        };
    </script>
</body>

</html>